<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style lang="less">
  html, body {
    margin: 0 0;
    width: 100%;
    height: 100%;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background:
        repeating-linear-gradient(90deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
        repeating-linear-gradient(0deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
        repeating-linear-gradient(-45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px),
        repeating-linear-gradient(45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px);
    .content {
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 0.5rem;
      /*滚动条圆角样式*/
      &::-webkit-scrollbar {
         width : 8px;
       }
      &::-webkit-scrollbar-thumb {
         border-radius: 8px;
         background: #a5d4fe;
       }
      &::-webkit-scrollbar-track {
         background: transparent;
       }
    }
  }
</style>
